<template>
   <div class="statistics">
        <h1>数据统计</h1>
        <div class="barContainer" ref="bar">

        </div>
        <div class="pieContainer" ref="pie"></div>
   </div>
</template>
<script>
import * as echarts from "echarts"
// 引入bar 配置
import barOption from "../../../echars/barOption"
import * as staApi from "../../../api/statistics"
import pieOption from '../../../echars/pieOption'
    export default{
        mounted () {
            // 初始化柱状图容器 
            this.barCharts=echarts.init(this.$refs.bar)
           this.barCharts.setOption(barOption)

          //    初始化环形图
           this.pieCharts=echarts.init(this.$refs.pie)
        //    打开加载动画
          this.pieCharts.showLoading();
           staApi.taskDataApi().then(res=>{
                // console.log(res.data.data);
            // 变更数据重新设置数据 重新设置option 
            
             pieOption.series[0].data=res.data.data;
            // 关闭加载动画
                this.pieCharts.hideLoading();      
              this.pieCharts.setOption(pieOption)
           });

           staApi.expectDataApi().then(res=>{
               console.log(res.data.data);
            //    let obj={};
               let arr=[];
               res.data.data.forEach(item=>{
                   let obj = {};
                   obj.name = item.title;
                   obj.value  = item.rate;
                   arr.push(obj);
               })
               console.log(arr);
           })
        }
    }
</script>
<style scoped >
.barContainer{
    height: 300px;
}
.pieContainer{
    height: 300px;
}
</style>